<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item style="font-size: 18px;"
                :to="{ path: '/ResultExport/CollectTask' }">采集任务</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: 18px;">{{ taskName }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词">
                <el-select v-model="valueKeywords" multiple filterable allow-create default-first-option
                    placeholder="请输入关键词" no-data-text="输入后回车添加" style="width: 300px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文件类型">
                <el-select v-model="valueFileType" multiple filterable default-first-option placeholder="请选择文件类型"
                    style="width: 300px;">
                    <el-option v-for="item in optionsFileType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="fileName" label="文件名称" align="center">
            </el-table-column>
            <el-table-column prop="domainUrl" label="域名链接" align="center">
            </el-table-column>
            <el-table-column prop="fileSource" label="文件来源" align="center">
            </el-table-column>
            <el-table-column prop="keywords" label="关键词" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClickView(scope.row)" type="text" size="small">预览</el-button>
                    <el-button @click="handleClickDownload(scope.row)" type="text" size="small">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleClickView(row) {
            console.log(row);
        },
        handleClickDownload(row) {
            console.log(row);
        }
    },
    data() {
        return {
            taskName: this.$route.params.taskName,
            tableData: [{
                fileName: '1.pdf',
                domainUrl: '王小虎',
                fileSource: '上海市普陀区金沙江路 1518 弄',
                keywords: '关键词'
            }, {
                fileName: '2.pdf',
                domainUrl: '王小虎',
                fileSource: '上海市普陀区金沙江路 1518 弄',
                keywords: '关键词'
            }, {
                fileName: '3.pdf',
                domainUrl: '王小虎',
                fileSource: '上海市普陀区金沙江路 1518 弄',
                keywords: '关键词'
            }, {
                fileName: '4.pdf',
                domainUrl: '王小虎',
                fileSource: '上海市普陀区金沙江路 1518 弄',
                keywords: '关键词'
            }, {
                fileName: '5.pdf',
                domainUrl: '王小虎',
                fileSource: '上海市普陀区金沙江路 1518 弄',
                keywords: '关键词'
            }],
            formInline: {
                user: '',
                region: ''
            },
            optionsKeywords: [],
            optionsFileType: [{
                value: 'pdf',
                label: 'pdf'
            }, {
                value: 'word',
                label: 'word'
            }, {
                value: 'excel',
                label: 'excel'
            }, {
                value: 'png',
                label: 'png'
            }, {
                value: 'jpg',
                label: 'jpg'
            }],
            valueKeywords: [],
            valueFileType: [],
        }
    }
}
</script>

<style></style>